<template>
  <div class="index-content" :class="[loaded ? '' : 'hide-style']">
    <!-- <loading :isLoading="loaded" v-show="!loaded" style="position: relative; z-index: 2"></loading> -->
    <div class="content">
      <!-- 影院热映start -->
      <div class="movie-hot">
        <scroll-component v-if="movieData.hot.length !== 0" :data="movieData.hot" :star="movieData.hotStarArr" scrollObj="wrapper0" title="影院热映"></scroll-component>
      </div>
      <!-- 影院热映end -->
      <!-- 即将上映start -->
      <!-- <div class="movie-upcoming">
        <scroll-component v-if="movieData.upcoming.length !== 0" :data="movieData.upcoming" :star="movieData.upcomingStarArr"  scrollObj="wrapper1" title="即将上映"></scroll-component>
      </div> -->
      <!-- 即将上映end -->
      <!-- 即将上映start -->
      <!-- <div class="movie-top250">
        <scroll-component v-if="movieData.top250.length !== 0" :data="movieData.top250" :star="movieData.top250StarArr"  scrollObj="wrapper2" title="Top250"></scroll-component>
      </div> -->
      <!-- 即将上映end -->
    </div>
  </div>
</template>

<script>
import scrollComponent from '../../../common/movie/scrollComponent'
import loading from '../../../common/loading/loading'
export default {
  data () {
    return {
      movieData: {
        hot: [], // 正在热映
        hotStarArr: [],
        upcoming: [], // 即将上映
        upcomingStarArr: [],
        top250: [], // Top250
        top250StarArr: []
      }
    }
  },
  created () {},
  mounted () {
    // 初始化页面数据
    this.initData()
  },
  computed: {
    loaded () {
      if (this.movieData.hot.length >= 1 && this.movieData.upcoming.length >= 1 && this.movieData.top250.length >= 1) {
        return true
      } 
    }
  },
  components: {
    scrollComponent,
    loading
  },
  methods: {
    // 初始化页面数据
    initData () {
      let hotUrl = '/api/movie/in_theaters'
      let upcomingUrl = '/api/movie/coming_soon'
      let top250Url = '/api/movie/top250'
      let self = this
      // 正在热映start
      this.httpRequest(hotUrl, 'hot', self.movieData.hotStarArr)
      // 即将上映
      this.httpRequest(upcomingUrl, 'upcoming', self.movieData.upcomingStarArr)
      // top250
      this.httpRequest(top250Url, 'top250', self.movieData.top250StarArr)
    },
    // http请求数据
    httpRequest (url, data, starArr) {
      let self = this
      this.$http(url)
        .then((res) => {
          // 对象属性赋值
          self.$set(self.movieData, data, res.data.subjects)
          // 过滤星星
          for (let i = 0; i < res.data.subjects.length; i++) {
            let num = Math.ceil(Number(res.data.subjects[i].rating.average)) / 2
            starArr.push([Math.ceil(num), (5 - Math.ceil(num))])
          }
        })
        .catch((err) => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="less">
.hide-style {
  position: fixed;
  overflow: hidden;
}

.index-content {
  padding: 0 15px;
  .movie-upcoming, .movie-top250 {
    margin-top: 20px;
  }
}
</style>
